<template>
  <view class="financial-container">
    <view class="header">
      <text class="header-title">资金明细</text>
    </view>
    
    <!-- 资金列表 -->
    <view class="financial-list">
      <!-- 佣金收入 -->
      <view class="financial-item income">
        <view class="item-header">
          <text class="item-type">佣金</text>
          <text class="item-amount">+309</text>
        </view>
        <text class="item-time">2025-09-06 08:25:16</text>
        <text class="item-balance">余额3151.43</text>
      </view>
      
      <!-- 销售成本支出 -->
      <view class="financial-item expense">
        <view class="item-header">
          <text class="item-type">销售成本</text>
          <text class="item-amount">-121.545</text>
        </view>
        <text class="item-time">2025-09-05 16:45:20</text>
        <text class="item-balance">余额2842.44</text>
      </view>
      
      <!-- 销售成本支出 -->
      <view class="financial-item expense">
        <view class="item-header">
          <text class="item-type">销售成本</text>
          <text class="item-amount">-59.94</text>
        </view>
        <text class="item-time">2025-09-04 18:16:59</text>
        <text class="item-balance">余额2963.99</text>
      </view>
      
      <!-- 销售成本支出 -->
      <view class="financial-item expense">
        <view class="item-header">
          <text class="item-type">销售成本</text>
          <text class="item-amount">-121.545</text>
        </view>
        <text class="item-time">2025-09-03 17:11:59</text>
        <text class="item-balance">余额3023.93</text>
      </view>
      
      <!-- 销售成本支出 -->
      <view class="financial-item expense">
        <view class="item-header">
          <text class="item-type">销售成本</text>
          <text class="item-amount">-59.94</text>
        </view>
        <text class="item-time">2025-09-03 10:31:50</text>
        <text class="item-balance">余额3145.47</text>
      </view>
      
      <!-- 佣金收入 -->
      <view class="financial-item income">
        <view class="item-header">
          <text class="item-type">佣金</text>
          <text class="item-amount">+49</text>
        </view>
        <text class="item-time">2025-09-03 08:15:41</text>
        <text class="item-balance">余额3181.64</text>
      </view>
      
      <!-- 销售成本支出 -->
      <view class="financial-item expense">
        <view class="item-header">
          <text class="item-type">销售成本</text>
          <text class="item-amount">-9.99</text>
        </view>
        <text class="item-time">2025-09-03 08:15:41</text>
        <text class="item-balance">余额3132.64</text>
      </view>
      
      <!-- 销售成本支出 -->
      <view class="financial-item expense">
        <view class="item-header">
          <text class="item-type">销售成本</text>
          <text class="item-amount">-121.545</text>
        </view>
        <text class="item-time">2025-09-03 08:15:41</text>
        <text class="item-balance">余额3142.63</text>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view class="nav-item">
        <image src="/static/images/nav-home.png" mode="aspectFit"></image>
        <text>首页</text>
      </view>
      <view class="nav-item">
        <image src="/static/images/nav-order.png" mode="aspectFit"></image>
        <text>订单</text>
      </view>
      <view class="nav-item">
        <image src="/static/images/nav-ai.png" mode="aspectFit"></image>
        <text>AI</text>
      </view>
      <view class="nav-item active">
        <image src="/static/images/nav-profile-active.png" mode="aspectFit"></image>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
// 移除未使用的API_CONFIG导入
export default {
  data() {
    return {
      financialRecords: [],
      loading: false,
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  
  onLoad() {
    // 页面加载时获取资金明细
    this.getFinancialRecords()
  },
  
  methods: {
    // 获取资金明细
    async getFinancialRecords() {
      if (this.loading || !this.hasMore) {
        return
      }
      
      this.loading = true
      try {
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        // 这里可以添加实际的API调用
        /*
        const res = await uni.request({
          url: API_CONFIG.BASE_URL + '/api/financial/records',
          method: 'GET',
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          data: {
            page: this.page,
            pageSize: this.pageSize
          }
        })
        
        if (res.data.code === 0 && res.data.data) {
          const newRecords = res.data.data.records || []
          if (newRecords.length < this.pageSize) {
            this.hasMore = false
          }
          this.financialRecords = [...this.financialRecords, ...newRecords]
          this.page++
        } else {
          this.hasMore = false
        }
        */
        
        // 模拟数据已在模板中硬编码
        
      } catch (error) {
        uni.showToast({
          title: '获取资金明细失败',
          icon: 'none'
        })
        console.error('获取资金明细失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    // 上拉加载更多
    onReachBottom() {
      this.getFinancialRecords()
    }
  }
}
</script>

<style scoped>
.financial-container {
  background-color: #3A3052;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.header {
  background-color: #2A2240;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #52496D;
}

.header-title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.financial-list {
  padding: 20rpx;
}

.financial-item {
  background-color: #4A4062;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.financial-item.income .item-amount {
  color: #F44336;
}

.financial-item.expense .item-amount {
  color: #4CAF50;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.item-type {
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
}

.item-amount {
  font-size: 36rpx;
  font-weight: bold;
}

.item-time {
  color: #8F82A8;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  display: block;
}

.item-balance {
  color: #F0D9B5;
  font-size: 28rpx;
  display: block;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #2A2240;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #3A3052;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8F82A8;
}

.nav-item.active {
  color: #F0D9B5;
}

.nav-item image {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}

.nav-item text {
  font-size: 24rpx;
}
</style>